"""
@author: Gaoyaoxia
@date: 2021-03-04 10:58:46
"""
<!-- 履职档案 -->
<template>
  <div class="base-table-box">
    <div class="table-select-group">
      <div class="left">
        <s-select
          :selectOption="strSIds"
          v-model="params.strSId"
          style="width: 140px"
        />
        <s-select
          :selectOption="member.sectorType"
          v-model="params.strSector"
          style="width: 80px"
        />
        <s-select
          :selectOption="member.factionType"
          v-model="params.strFaction"
          style="width: 80px"
        />
        <s-select
          :selectOption="member.committeeOptions"
          v-model="params.isCommittee"
          style="width: 100px"
        />
        <a-input
          class="search-input"
          v-model="params.keywords"
          placeholder="请输入搜索内容"
        />

        <a-button style="margin-left: 16px" type="primary" @click="onSearch"
          >查询</a-button
        >
        <a-button @click="onReset" class="btn-reset">重置</a-button>
      </div>
      <div class="right">
        <a-button type="primary" @click="handleListExport">导出列表</a-button>
        <a-button type="primary" @click="handleRecordExport"
          >导出履职档案</a-button
        >
      </div>
    </div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
    >
      <template slot="score" slot-scope="text, record">
        <a class="a-score" @click="onScoreDetail(record)">{{ text }}</a>
      </template>
      <span slot="action" slot-scope="text, record">
        <router-link
          target="_blank"
          :to="{ path: '/memberResume/detail', query: { id: record.id } }"
          >查看详情</router-link
        >
      </span>
    </a-table>
    <!-- 弹窗 -->
    <a-modal
      :visible="visible"
      title="查看详情"
      width="780px"
      :scroll="{ y: 427 }"
      @cancel="visible = false"
      :footer="null"
    >
      <a-table
        style="height: 525px"
        class="base-table-box modal"
        :pagination="false"
        :columns="modalColumn"
        :data-source="modalData"
      >
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { member } from 'assets/js/select-option-list'
import paging from 'mixins/paging'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '现任职务',
    dataIndex: 'currentJob',
    width: 120,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '界别',
    dataIndex: 'strSector',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '党派',
    dataIndex: 'strFaction',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '常委',
    dataIndex: 'isCommittee',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '提案',
    dataIndex: 'proposal',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'score' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '社情民意',
    dataIndex: 'social',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'score' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '会议',
    dataIndex: 'meeting',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'score' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '活动',
    dataIndex: 'event',
    align: 'center',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'score' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '会议发言',
    dataIndex: 'speaking',
    align: 'center',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'score' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '总分',
    dataIndex: 'totalScore',
    align: 'center',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const modalColumn = [
  {
    title: '事件名称',
    dataIndex: 'eventName',
    align: 'center',
    width: 200
  },
  {
    title: '事件时间',
    dataIndex: 'eventTime',
    align: 'center',
    width: 200
  },
  {
    title: '状态',
    dataIndex: 'eventStatus',
    width: 200,
    align: 'center'
  }
]
export default {
  mixins: [paging],
  components: {},
  data() {
    return {
      member,
      columns,
      modalColumn,
      strSIds: [],
      strSectors: [],
      strFactions: [],
      params: {
        keywords: '',
        strSId: '十四届四次',
        strSector: '',
        strFaction: '',
        isCommittee: ''
      },
      tableData: [],
      visible: false,
      modalData: []
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    getTableData(params = this.params) {
      console.log('参数：', params)
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          id: `ID${i}`,
          key: i,
          name: `King ${i}`,
          currentJob: '商信政通',
          strSector: '民革',
          strFaction: '中共',
          isCommittee: '否',
          proposal: 0,
          social: 0,
          meeting: 0,
          event: 0,
          speaking: 0,
          totalScore: '0.0'
        })
      }
      this.pagination.total = this.tableData.length
    },
    onScoreDetail(record) {
      this.visible = true
      this.getModalData(record)
    },
    getModalData(record) {
      console.log(record)
      for (let i = 0; i < 5; i++) {
        this.modalData.push({
          eventName: '全会测试',
          eventTime: '2021-02-26 00:00',
          eventStatus: '待确认'
        })
      }
    },
    onSearch() {},
    onReset() {},
    handleListExport() {},
    handleRecordExport() {}
  },
  created() {}
}
</script>
<style lang='less' scoped>
.a-score {
  text-decoration: underline;
}
.modal {
    /deep/.ant-table-content{
        border-bottom: none;
    }
    /deep/.ant-table-tbody > tr > td{
        padding: 12px;
    }
}
</style>